<template>
    <h2>图例和所有柱子关联</h2>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let data = [
        10,
        20,
        30,
        40,
        50
    ]
    let legends = ['leg1', 'leg2', 'leg3', 'leg4', 'leg5']
    const seriesFn = (dres) => {
        let newSeries = [];
        dres.map((item, index) => {
            let seriesItem = {
                data: [],
                barWidth: '20%',
                barGap: '-100%',
                name: legends[index],
                type: 'bar',
            };
            for (let i = 0; i < dres.length; i++) {
                let seriesItemDataItem_item = {
                    value: item,
                    itemStyle: {
                        opacity: i == index ? 1 : 0,
                    },
                }
                seriesItem.data.push(seriesItemDataItem_item)
            }
            newSeries.push(seriesItem)
        })
        return newSeries;
    }
    let series_ = seriesFn(data);
    console.log(series_)
    let option = {
        xAxis: {
            type: 'category',
            data: ['x1', 'x2', 'x3', 'x4', 'x5']
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: legends
        },
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ffa39e' // 0% 处的颜色
                }, {
                    offset: 1, color: '#f5222d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#91d5ff' // 0% 处的颜色
                }, {
                    offset: 1, color: '#1890ff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ffd591' // 0% 处的颜色
                }, {
                    offset: 1, color: '#fa8c16' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#87e8de' // 0% 处的颜色
                }, {
                    offset: 1, color: '#13c2c2' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#0128b460' // 0% 处的颜色
                }, {
                    offset: 1, color: '#0128b4' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        ],
        series: series_
    };
    myChart.setOption(option);
}
onMounted(() => {
    initChart();
})
</script>

<style scoped>
.chart {
    width: 1000px;
    height: 600px;
}
</style>